import { Button, Popup, TreeList } from 'devextreme-react';
import React, { useImperativeHandle, useRef, useState } from 'react';
import { intl } from "@/utils";
import { useModel } from 'umi';
import PageLoading from '../PageLoading';
import { Column, Toolbar, Item } from 'devextreme-react/tree-list';
import { getSubjectSDB } from './service';

import './index.less';
import { CpasIcon } from '~/public/cpas-ui';


const AssistPupop = React.forwardRef((props: any, ref: any) => {
    const { initialState } = useModel('@@initialState');
    const [visible, setVisible] = useState<boolean>(false);
    const popupRef = useRef<any>(null);
    const [cpasTableName, setCpasTableName] = useState<string>('');
    const [cpasTableData, setCpasTableData] = useState<any>({});
    const [spinLoad, setSpinLoad] = useState<boolean>(false);
    const diaParams = useRef<any>(null);
    const [recursiveMultiple, setRecursiveMultiple] = useState<boolean>(true);
    const [selectMode, setSelectMode] = useState<string>("");
    const [searchValue, setSearchValue] = useState<string>("");
    const TreeListRef = useRef<any>(null);
    const [SubjectSDBDatas, setSubjectSDBDatas] = useState<any>([]);



    const onOk = () => {
        const getrowdata = TreeListRef.current.instance.getSelectedRowsData();
        diaParams.current?.okCallback(getrowdata[0], getrowdata);
        TreeListRef.current.instance.searchByText();
        TreeListRef.current.instance.clearSelection();
        setVisible(false);

    }

    const onCancel = () => {
        setSubjectSDBDatas([]);
        TreeListRef.current.instance.searchByText();
        TreeListRef.current.instance.clearSelection();
        setVisible(false);
        diaParams.current?.setIsNeedAssist && diaParams.current.setIsNeedAssist(false);//抽样需要 
    }

    // 获取表格数据
    const getSubjectSDBDatas = async (inSearchValue?: string) => {
        setSpinLoad(true);
        const res: any = await getSubjectSDB({
            dbname: diaParams.current?.dbname,
            Data_ID: diaParams.current?.Data_ID,
            searchValue: inSearchValue || searchValue,
        });
        if (res.success) {
            setSubjectSDBDatas(res.data);
        } else {
            setSubjectSDBDatas([]);
        }
        setSpinLoad(false);

    };

    // 自定义方法
    useImperativeHandle(ref, () => ({
        showAssistPupop: (params: any) => {
            setVisible(true);
            diaParams.current = params;
            setRecursiveMultiple(diaParams.current?.recursiveMultiple ?? true);
            setSelectMode(diaParams.current?.selectMode);
            getSubjectSDBDatas();
        },
    }));



    return (
        <>
            <Popup
                ref={popupRef}
                visible={visible}
                title='选择辅助账'
                width={900}
                height={700}
                // dragOutsideBoundary={true}
                // resizeEnabled={true}
                onHiding={() => onCancel()}
                toolbarItems={[
                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: intl('pub.cancel', '取消'),
                            onClick: () => onCancel()
                        },
                    },
                    {
                        widget: 'dxButton',
                        toolbar: 'bottom',
                        location: 'after',
                        options: {
                            text: intl('pub.ok', '确定'),
                            type: 'default',
                            onClick: () => onOk()
                        },
                    },

                ]}
            >

                <div style={{ height: '550px', width: '100%', overflow: 'hidden' }}>
                    {/* {spinLoad && <SpinLoading loadString="" />} */}

                    <PageLoading
                        isOpen={spinLoad}
                        isMaskClose={false}
                        content={""}
                        width={200}
                    />
                    {/* {useMemo(() => {
                        console.log(SubjectSDBDatas, '@@@ ');
                        return          }, [SubjectSDBDatas, recursiveMultiple, selectMode])} */}

                    <TreeList
                        selection={{
                            recursive: recursiveMultiple,
                            mode: selectMode === "0" ? "single" : "multiple",
                        }}
                        className="PublicTreeList2"
                        ref={TreeListRef}
                        dataSource={SubjectSDBDatas}
                        allowColumnResizing={true}
                        showBorders={true}
                        showRowLines={true}
                        searchPanel={{ visible: true,/*  width: 300, */ placeholder: '' }}
                        // allowColumnResizing={true}
                        // columnAutoWidth={true}
                        // showRowLines={true}
                        // showBorders={true}
                        columnResizingMode="widget"
                        columnMinWidth={100}
                        parentIdExpr="PID"
                        keyExpr="ID"
                        rootValue={"0"}
                        // id="Code"
                        width="100%"
                        height="100%"
                        focusedRowEnabled={true}
                        // onCellClick={onCellClick}
                        // onContentReady={contentReady}
                        // onCellDblClick={onCellDblClick}
                        // onSelectionChanged={() => {
                        //     console.log("触发----------");
                        //     setSelectState(false);
                        // }}
                        // 显示斑马线
                        rowAlternationEnabled={true}
                    // onContextMenuPreparing={relationMenuItems}
                    >

                        <Toolbar>
                            <Item name="searchPanel" location="after" />
                            <Item location="after" >
                                <div className="IconRefresh_Style" title='刷新'>
                                    <CpasIcon
                                        type="icon-refresh"
                                        fontSize={16}
                                        onClick={() => {
                                            getSubjectSDBDatas();
                                        }}
                                    />
                                </div>
                              
                            </Item>

                        </Toolbar>
                        <Column
                            dataField="displayName"
                            caption="辅助账名称"
                            alignment="left"

                        />
                        <Column
                            dataField="itemNames"
                            caption="报表项目"
                            width={130}
                            alignment="left"
                        />
                        <Column
                            dataField="itemqwerty"
                            caption="多方挂账"
                            width={130}
                            alignment="left"
                        />
                    </TreeList>
                </div>
            </Popup>
        </>
    );
});

export default AssistPupop;
